<template>
    <div class="big">
        <ul class="one">
            <li v-for="(item, index) in categories" :key="index" @click="a(item.name, index)">
                {{ item.name }}</li>

        </ul>
        <ul>
            <li v-for="(item, index) in children" :key="index" @click="b(item.name)">
                {{ item.name }}</li>
        </ul>
        <ul>
            <li v-for="(item, index) in countries" :key="index" @click="c(item.name)">
                {{ item.name }}</li>
        </ul>
        <ul>
            <li v-for="(item, index) in years" :key="index" @click="d(item.name)">
                {{ item.name }}</li>
        </ul>

        <section v-for="(item, index) in hahaha" :key="index">

            <img :src="item.poster" alt="">
        </section>



    </div>
</template>
<script>
import axios from 'axios';
import { fenlei, classmove } from '../../api/all/index'
export default {
    data() {
        return {
            categories: [],
            children: [],
            countries: [],
            years: [],
            a1: [],
            a2: [],
            a3: [],
            a4: [],
            hahaha: []



        }
    },
    methods: {
        a(name, index) {
            // console.log(name);
            this.children = this.categories[index].children
            this.a1 = name

            axios.get(`https://test-h5-api.ixook.com/movies?page=1&per_page=21&category=${this.a1}&genre=${this.a2}&country=${this.a3}&year=${this.a4}`).then(res => {
                console.log(res.data.data);
                this.hahaha = res.data.data
            })
        },
        b(name) {
            // console.log(name);
            this.a2 = name
            axios.get(`https://test-h5-api.ixook.com/movies?page=1&per_page=21&category=${this.a1}&genre=${this.a2}&country=${this.a3}&year=${this.a4}`).then(res => {
                console.log(res.data.data);
                this.hahaha = res.data.data
            })
        },
        c(name) {
            // console.log(name);
            this.a3 = name
            axios.get(`https://test-h5-api.ixook.com/movies?page=1&per_page=21&category=${this.a1}&genre=${this.a2}&country=${this.a3}&year=${this.a4}`).then(res => {
                console.log(res.data.data);
                this.hahaha = res.data.data
            })
        },
        d(name) {
            // console.log(name);
            this.a4 = name
            axios.get(`https://test-h5-api.ixook.com/movies?page=1&per_page=21&category=${this.a1}&genre=${this.a2}&country=${this.a3}&year=${this.a4}`).then(res => {
                console.log(res.data.data);
                this.hahaha = res.data.data
            })
        }

    },
    created() {
        fenlei().then(res => {
            // console.log(res);
            this.categories = res.data.data.categories
            // this.children = res.data.data.categories.children
            this.countries = res.data.data.countries
            // console.log(this.countries);
            this.years = res.data.data.years
        })
    },
}

</script>
<style lang="scss" scoped>
.big {
    section {
        vertical-align: top;
        display: inline-block;
        margin: 0 0.13333333rem;
        padding-bottom: 0.26666667rem;
        width: 2.93333333rem;
        // width: 375px;
        box-sizing: border-box;
    }

    ul {
        display: flex;
        white-space: nowrap;
        overflow: auto;
        width: 375px;
        height: 32px;
        // justify-content: space-between;
        margin-right: 15px;

        // ul.one {
        //     width: 355px;
        // }


        li {
            // width: 48px;
            height: 20px;
            padding-left: 20px;
            // padding-right: 20px;
            // margin-right: 20px;

        }
    }
}
</style>